<template>
  <div id="app">
    <div v-if="!isLoginPage">
      <TopNavBar />
      <RouterView v-if="!isLoginPage" />
    </div>
    <div v-if="isLoginPage">
      <LoginView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import TopNavBar from './components/common/TopNavBar.vue';
import LoginView from './views/LoginView.vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from './stores/userStores';
import { PageConstant } from './common/Constant';

const { requestToGetUserInfo } = useUserStore();
const route = useRoute();
const router = useRouter();
const isLoginPage = computed(() => route.path === PageConstant.LoginPage);

onMounted(async () => {
  if (!isLoginPage.value) {
    try {
      await requestToGetUserInfo();
    } catch (error) {
      router.replace(PageConstant.LoginPage);
    }
  }
});

</script>

<style>
/* 设置全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  /* 滚动条宽度 */
  height: 8px;
  /* 横向滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

/* 鼠标悬浮在滑块上时 */
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>